import React from 'react'
import ReactEcharts from 'echarts-for-react'
import echarts from 'echarts'

var nowdate = new Date()
let endstr = `${nowdate.getFullYear()}-${nowdate.getMonth() +
  1}-${nowdate.getDate() + 1}`
let end = +echarts.number.parseDate(endstr) //`${+year + 1}-01-01`
let date = +(end - 365 * 24 * 60 * 60 * 1000)
let datestr = echarts.format.formatTime('yyyy-MM-dd', date)
// let max = 0;

const GCalendarComponent = ({ datas, max }) => {
  const getVirtulData = () => {
    // year = year || '2019'
    let dayTime = 3600 * 24 * 1000
    let data = []
    for (let time = date; time < end; time += dayTime) {
      const dattime = echarts.format.formatTime('yyyy-MM-dd', time)
      const count = datas[dattime] ? parseInt(datas[dattime]) : 0
      if (count > max.max) {
        max.max = count
      }
      data.push([dattime, count])
    }
    return data
  }

  const option = {
    tooltip: {
      borderWidth: 0,
      position: 'left',
      formatter: '{b0}{c0}',
      extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',
    },
    coordinateSystem: 'cartesian2d',
    visualMap: {
      show: true,
      type: 'piecewise',
      min: 0,
      max: max.max == 0 ? 200 : max.max,
      orient: 'horizontal',
      left: 'center',
      top: 'top',
      inRange: {
        color: ['rgba(62,76,114,0.1)', 'rgba(62,76,114,0.8)'],
      },
    },
    calendar: [
      {
        range: [datestr, endstr],
        cellSize: ['auto', 'auto'],
        left: '24px',
      },
    ],
    series: [
      {
        type: 'heatmap',
        coordinateSystem: 'calendar',
        calendarIndex: 0,
        data: getVirtulData(),
        itemStyle: {
          color: '#1E90FF',
          borderWidth: 0,
        },
      },
    ],
  }

  return (
    <ReactEcharts
      option={option}
      style={{ height: '140px' }}
      className="react_for_echarts"
    />
  )
}

export default GCalendarComponent
